<template>
  <div class="tophead">
    <div class="th-l" @click="backAction"><i class="icon iconfont icon-back "></i></div>
    <div class="th-title"><i>{{title}}</i></div>
    <div class="th-r"><slot name="r"></slot></div>
  </div>
</template>

<script>
export default {
  name: "tophead",
  data(){
    return{

    }
  },
  methods: {
    backAction(){
      if(this.backUrl){
        this.$router.push('backUrl')
      }else{
        this.$router.go(-1)
      }
    }
  },
  props:['title','backUrl']
}
</script>

<style lang="scss" scoped>
  .tophead {
  display: flex;
  justify-content: space-between;
  height: $th;
  line-height: $th;
  color: #fff;
  font-size: $text-size-imp;
  background-color: $act-color;
  .th-l {
    padding-left: px2rem(25);
  }
  .th-title {
    text-align: center;
  }
  .th-r {
    padding-right: px2rem(25);
  }
  .icon::before {
    font-size: $text-size-imp;
  }
}
</style>

